<template>
  <div class="sign-page">
    <div class="container">
    
      <!-- 登录界面 -->
      <div class="card" v-if="!isLoggedIn">
        <div class="card-title">登录</div>
        <div class="login-form">
          <div class="form-group">
            <label for="phoneInput">手机号码</label>
            <div class="input-row">
              <input type="text" id="phoneInput" class="input-field" placeholder="请输入手机号" v-model="phone">
              <button class="addon-btn" id="getCode" @click="getAuthCode" :disabled="cooldown > 0">
                {{ cooldown > 0 ? `重新获取(${cooldown})` : '获取验证码' }}
              </button>
            </div>
          </div>
          <div class="form-group">
            <label for="codeInput">验证码</label>
            <div class="input-row">
              <input type="text" id="codeInput" class="input-field" placeholder="请输入验证码" v-model="authCode">
            </div>
          </div>
          <div class="login-actions">
            <button class="btn" id="loginBtn" @click="login">登录</button>
          </div>
          <div :class="['status', loginStatusType]" v-if="loginStatusMessage">
            {{ loginStatusMessage }}
          </div>
        </div>
      </div>

      <!-- 个人资料 -->
      <div class="card" v-if="isLoggedIn">
        <div class="card-title">用户信息</div>
        <div class="profile-content">
          <div class="profile-user">
            <img :src="userAvatar" class="profile-avatar" alt="用户头像">
            <div class="profile-info">
              <div class="profile-name">{{ userName }}</div>
              <div class="profile-phone">{{ userPhone }}</div>
            </div>
          </div>
          <div class="profile-status-wrapper">
            <div class="profile-status-item">
              <div class="profile-status-value">{{ continuousDays }}</div>
              <div class="profile-status-label">连续签到(天)</div>
            </div>
            <div class="profile-status-item">
              <div class="profile-status-value">{{ totalPoints }}</div>
              <div class="profile-status-label">当前积分</div>
            </div>
            <div class="profile-status-item">
              <div class="profile-status-value">{{ totalSignDays }}</div>
              <div class="profile-status-label">总签到(天)</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 签到状态 -->
      <div class="card" v-if="isLoggedIn">
        <div class="card-title">签到状态</div>
        <div class="sign-status">
          <div class="status-info">
            <div class="info-item">
              <span class="label">上次签到：</span>
              <span class="value">{{ lastSignTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">下次签到：</span>
              <span class="value">{{ nextSignTime }}</span>
            </div>
            <div class="info-item">
              <span class="label">今日状态：</span>
              <span class="value" :class="{ 'signed': todaySigned }">
                {{ todaySigned ? '已签到' : '未签到' }}
              </span>
            </div>
          </div>
          
          <div class="action-buttons">
            <button 
              class="btn" 
              :disabled="todaySigned || signing" 
              @click="signIn"
            >
              {{ signing ? '签到中...' : (todaySigned ? '今日已签到' : '立即签到') }}
            </button>
            
            <button 
              class="btn" 
              :disabled="signing"
              :class="autoSignEnabled ? 'btn-secondary' : ''"
              @click="toggleAutoSign"
            >
              {{ autoSignEnabled ? '关闭自动签到' : '开启自动签到' }}
            </button>
          </div>
          
          <div :class="['status', statusType]" v-if="statusMessage">
            {{ statusMessage }}
          </div>
        </div>
      </div>

      <!-- 自动签到设置 -->
      <div class="card" v-if="isLoggedIn && autoSignEnabled">
        <div class="card-title">自动签到设置</div>
        <div class="settings">
          <div class="form-group">
            <label for="signTime">签到时间</label>
            <input 
              type="time" 
              id="signTime" 
              v-model="signTime"
              @change="saveSettings"
            >
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input 
                type="checkbox" 
                id="enableNotification" 
                v-model="notificationsEnabled"
                @change="saveSettings"
              >
              启用签到提醒通知
            </label>
          </div>
        </div>
      </div>

      <!-- 签到日志 -->
      <div class="card">
        <div class="card-title">签到日志</div>
        <div class="sign-logs">
          <template v-if="signLogs.length > 0">
            <div class="log-item" v-for="(log, index) in signLogs" :key="index">
              <span class="log-time">{{ log.time }}</span>
              <span class="log-message">{{ log.message }}</span>
            </div>
          </template>
          <div class="empty-log" v-else>
            暂无签到日志
          </div>
        </div>
        <div class="log-footer">
          <span>日志显示最近记录</span>
          <button class="btn btn-small" @click="clearLogs">清空日志</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import logoImage from '@/assets/logo.png';
import request from '@/utils/rquest';
import { getVerifyCode as apiGetVerifyCode, login as apiLogin } from '@/api/user';
import { 
  appSigninInfoApi,
  appSigninApi,
  appSigninDaysApi
} from '@/api/signin';

// API基础URL
const apiBaseUrl = "http://8.141.3.227:4444/api";

// 登录状态
const isLoggedIn = ref(false);
const phone = ref('');
const authCode = ref('');
const loginStatusMessage = ref('');
const loginStatusType = ref('');
const cooldown = ref(0);
let countdownTimer = null;

// 用户信息数据
const userName = ref('未登录');
const userPhone = ref('');
const userAvatar = ref('');

// 签到状态数据
const todaySigned = ref(false);
const signing = ref(false);
const continuousDays = ref(0);
const totalSignDays = ref(0);
const totalPoints = ref(0);
const statusMessage = ref('');
const statusType = ref('');
const lastSignTime = ref('未签到');
const nextSignTime = ref('未设置');

// 自动签到设置
const autoSignEnabled = ref(false);
const signTime = ref('08:00');
const notificationsEnabled = ref(false);
let scheduledSignInTime = null;

// 签到日志
const signLogs = ref([]);

// 获取验证码
async function getAuthCode() {
  if (!phone.value || !/^1\d{10}$/.test(phone.value)) {
    loginStatusMessage.value = '请输入有效的手机号!';
    loginStatusType.value = 'error';
    return;
  }

  loginStatusMessage.value = '正在获取验证码...';
  loginStatusType.value = '';

  // 禁用按钮并开始倒计时
  cooldown.value = 60;
  countdownTimer = setInterval(() => {
    if (cooldown.value > 0) {
      cooldown.value--;
    } else {
      clearInterval(countdownTimer);
    }
  }, 1000);

  try {
    const res = await apiGetVerifyCode(phone.value);
    if (res && (res.code === 200 || res.success)) {
      loginStatusMessage.value = '验证码已发送，请查收!';
      loginStatusType.value = 'success';
      addToLog(`验证码已发送至 ${phone.value}`);
    } else {
      loginStatusMessage.value = '获取验证码失败';
      loginStatusType.value = 'error';
      addToLog(`获取验证码失败`);
      clearInterval(countdownTimer);
      cooldown.value = 0;
    }
  } catch (error) {
    loginStatusMessage.value = '网络错误，请重试!';
    loginStatusType.value = 'error';
    addToLog(`网络错误: ${error.message}`);
    
    // 网络错误，重置倒计时
    clearInterval(countdownTimer);
    cooldown.value = 0;
  }
}

// 登录
async function login() {
  if (!phone.value || !/^1\d{10}$/.test(phone.value)) {
    loginStatusMessage.value = '请输入有效的手机号!';
    loginStatusType.value = 'error';
    return;
  }

  if (!authCode.value) {
    loginStatusMessage.value = '请输入验证码!';
    loginStatusType.value = 'error';
    return;
  }

  loginStatusMessage.value = '正在登录...';
  loginStatusType.value = '';

  try {
    const res = await apiLogin({
      phone: phone.value,
      code: authCode.value
    });
    if (res && (res.code === 200 || res.success)) {
      // 登录成功
      isLoggedIn.value = true;
      
      userName.value = '用户' + phone.value.substring(7);
      userPhone.value = phone.value;
      
      // 保存用户信息到本地
      localStorage.setItem('userPhone', phone.value);
      localStorage.setItem('userName', userName.value);
      // token 已在请求拦截器中存储于 pinia，若后端返回则自行接管
      
      // 加载签到数据
      loadSignData();
      
      // 获取签到日志
      fetchSignLogs();
      
      // 添加日志
      addToLog(`用户登录成功: ${phone.value}`);
      
      // 清除登录状态信息
      loginStatusMessage.value = '';
      
      // 如果启用了自动签到，安排下一次签到
      if (autoSignEnabled.value) {
        scheduleNextSignIn();
      }
    } else {
      loginStatusMessage.value = '登录失败';
      loginStatusType.value = 'error';
      addToLog(`登录失败`);
    }
  } catch (error) {
    loginStatusMessage.value = '网络错误，请重试!';
    loginStatusType.value = 'error';
    addToLog(`登录失败，网络错误: ${error.message}`);
  }
}

// 签到方法
async function signIn() {
  if (todaySigned.value || signing.value) return;
  
  signing.value = true;
  statusMessage.value = '正在签到...';
  statusType.value = '';
  
  try {
    const res = await appSigninApi({});
    if (res && (res.code === 200 || res.success)) {
      // 签到成功
      todaySigned.value = true;
      
      // 刷新签到信息
      await loadSignData();
      
      // 处理连续签到奖励
      let bonusPoints = 0;
      if (res.data.bonusPoints) {
        bonusPoints = res.data.bonusPoints;
      }
      
      statusMessage.value = '签到成功！';
      statusType.value = 'success';
      
      // 添加到签到日志
      addToLog(`签到成功，获得5${bonusPoints > 0 ? ' + ' + bonusPoints : ''}积分`);
      
      // 保存到本地存储（本地冗余）
      saveSignData();
      
      // 如果开启了自动签到，更新下次签到时间
      if (autoSignEnabled.value) {
        scheduleNextSignIn();
      }
      
      // 更新签到日志列表
      fetchSignLogs();
    } else {
      statusMessage.value = '签到失败: ' + (res.message || '未知错误');
      statusType.value = 'error';
      addToLog(`签到失败: ${res.message || '未知错误'}`);
      
      // 如果是token过期，需要重新登录
      if (res && (res.code === 401 || res.status === 401)) {
        isLoggedIn.value = false;
        localStorage.removeItem('userToken');
        addToLog('Token已过期，请重新登录');
      }
    }
  } catch (error) {
    console.error('签到失败:', error);
    statusMessage.value = '签到失败，请稍后重试';
    statusType.value = 'error';
    addToLog(`签到失败，网络错误: ${error.message}`);
  } finally {
    signing.value = false;
  }
}

// 切换自动签到状态
async function toggleAutoSign() {
  const newState = !autoSignEnabled.value;
  const phone = localStorage.getItem('userPhone');
  
  if (!phone) {
    statusMessage.value = '请先登录!';
    statusType.value = 'error';
    return;
  }
  
  try {
    // 使用request工具更新自动签到设置
    const res = await request.put(`/users/${phone}`, {
      autoSignEnabled: newState
    });
    
    if (res.success) {
      autoSignEnabled.value = newState;
      
      if (autoSignEnabled.value) {
        statusMessage.value = '自动签到已开启';
        statusType.value = 'success';
        addToLog('自动签到已开启');
        // 安排下一次签到
        scheduleNextSignIn();
      } else {
        statusMessage.value = '自动签到已关闭';
        statusType.value = 'success';
        addToLog('自动签到已关闭');
        // 取消定时任务
        if (scheduledSignInTime) {
          clearTimeout(scheduledSignInTime);
          scheduledSignInTime = null;
        }
      }
      
      // 保存设置
      saveSettings();
    } else {
      statusMessage.value = '更新自动签到设置失败';
      statusType.value = 'error';
      addToLog(`更新自动签到设置失败: ${res.message || '未知错误'}`);
    }
  } catch (error) {
    statusMessage.value = '网络错误，请重试';
    statusType.value = 'error';
    addToLog(`网络错误: ${error.message}`);
  }
}

// 保存设置
async function saveSettings() {
  const phone = localStorage.getItem('userPhone');
  if (!phone) return;
  
  try {
    // 使用request工具更新签到时间和通知设置
    const res = await request.put(`/users/${phone}`, {
      signTime: signTime.value,
      notificationsEnabled: notificationsEnabled.value
    });
    
    if (res.success) {
      // 本地保存设置
      const settings = {
        autoSignEnabled: autoSignEnabled.value,
        signTime: signTime.value,
        notificationsEnabled: notificationsEnabled.value
      };
      
      localStorage.setItem('signSettings', JSON.stringify(settings));
      
      // 如果自动签到已开启，重新安排下一次签到
      if (autoSignEnabled.value) {
        scheduleNextSignIn();
      }
    } else {
      addToLog(`保存设置失败: ${res.message || '未知错误'}`);
    }
  } catch (error) {
    addToLog(`保存设置失败，网络错误: ${error.message}`);
  }
}

// 清空日志
async function clearLogs() {
  try {
    // 使用request工具清空日志
    const res = await request.delete('/sign/logs');
    
    if (res.success) {
      signLogs.value = [];
      localStorage.setItem('signLogs', JSON.stringify(signLogs.value));
      addToLog('日志已清空');
    } else {
      addToLog(`清空日志失败: ${res.message || '未知错误'}`);
    }
  } catch (error) {
    addToLog(`清空日志失败，网络错误: ${error.message}`);
  }
}

// 获取签到日志
async function fetchSignLogs() {
  try {
    // 使用request工具获取签到日志
    // 后端未提供日志接口，这里保持本地日志为主
    return;
  } catch (error) {
    console.error('获取日志失败:', error);
    addToLog(`获取日志失败: ${error.message}`);
  }
}

// 检查用户是否登录
async function checkUserLogin() {
  const storedPhone = localStorage.getItem('userPhone');
  const storedToken = localStorage.getItem('userToken');
  
  if (storedPhone) {
    try {
      // 直接尝试加载签到数据，若成功则视为已登录
      userPhone.value = storedPhone;
      userName.value = localStorage.getItem('userName') || ('用户' + storedPhone.substring(7));
      const ok = await loadSignData();
      isLoggedIn.value = !!ok;
      return isLoggedIn.value;
    } catch (error) {
      console.error('验证登录状态失败:', error);
      return false;
    }
  }
  return false;
}

// 安排下一次签到
function scheduleNextSignIn() {
  if (scheduledSignInTime) {
    clearTimeout(scheduledSignInTime);
  }

  const now = new Date();
  const [hours, minutes] = signTime.value.split(':').map(Number);
  
  const targetTime = new Date();
  targetTime.setHours(hours, minutes, 0, 0);
  
  // 如果今天的时间已经过了，设置为明天
  if (now > targetTime) {
    targetTime.setDate(targetTime.getDate() + 1);
  }
  
  // 更新下一次签到时间显示
  nextSignTime.value = targetTime.toLocaleTimeString([], {
    hour: '2-digit',
    minute: '2-digit'
  });
  
  // 计算到下次签到的时间差（毫秒）
  const timeUntilSign = targetTime - now;
  
  // 记录签到安排
  addToLog(`下次签到安排在 ${targetTime.toLocaleString()}`);
  
  // 设置定时器
  scheduledSignInTime = setTimeout(() => {
    if (!todaySigned.value) {
      signIn();
    } else {
      addToLog('今天已经签到过，跳过自动签到');
      // 安排下一天的签到
      scheduleNextSignIn();
    }
  }, timeUntilSign);
}

// 保存签到数据
function saveSignData() {
  const signData = {
    todaySigned: todaySigned.value,
    lastSignTime: lastSignTime.value,
    continuousDays: continuousDays.value,
    totalSignDays: totalSignDays.value,
    totalPoints: totalPoints.value,
    lastSignDate: new Date().toISOString().split('T')[0]
  };
  
  localStorage.setItem('signData', JSON.stringify(signData));
}

// 添加日志
function addToLog(message) {
  const now = new Date();
  const timeStr = now.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'});
  
  signLogs.value.unshift({
    time: timeStr,
    message
  });
  
  // 最多保留10条日志
  if (signLogs.value.length > 10) {
    signLogs.value = signLogs.value.slice(0, 10);
  }
  
  // 保存日志
  localStorage.setItem('signLogs', JSON.stringify(signLogs.value));
}

// 加载设置
function loadSettings() {
  try {
    const settings = JSON.parse(localStorage.getItem('signSettings'));
    
    if (settings) {
      autoSignEnabled.value = settings.autoSignEnabled || false;
      signTime.value = settings.signTime || '08:00';
      notificationsEnabled.value = settings.notificationsEnabled || false;
    }
  } catch (e) {
    console.error('加载设置失败:', e);
  }
}

// 加载签到数据
async function loadSignData() {
  try {
    const infoRes = await appSigninInfoApi({});
    if (infoRes && (infoRes.code === 200 || infoRes.success)) {
      const data = infoRes.data || {};
      // 适配字段
      todaySigned.value = !!data.todaySigned || !!data.todaySign;
      continuousDays.value = data.continuousDays || data.continuityDays || 0;
      totalSignDays.value = data.totalSignDays || data.totalDays || 0;
      totalPoints.value = data.pointsBalance || data.integral || 0;
      if (data.lastSignTime || data.lastSignIn) {
        const last = new Date(data.lastSignTime || data.lastSignIn);
        lastSignTime.value = last.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
      }
      // 本地冗余保存
      saveSignData();
      return true;
    }
  } catch (e) {
    console.error('加载签到数据失败:', e);
  }
  return false;
}

// 加载日志
async function loadLogs() {
  try {
    // 先尝试从本地存储加载
    const logs = JSON.parse(localStorage.getItem('signLogs'));
    
    if (logs && Array.isArray(logs)) {
      signLogs.value = logs;
    }
    
    // 然后尝试从服务器获取最新日志
    await fetchSignLogs();
  } catch (e) {
    console.error('加载日志失败:', e);
  }
}

// 页面加载
onMounted(async () => {
  // 检查用户是否已登录
  if (await checkUserLogin()) {
    // 加载本地存储的设置和数据
    loadSettings();
    loadSignData();
    loadLogs();
    
    // 安排下一次签到
    if (autoSignEnabled.value) {
      scheduleNextSignIn();
    }
  } else {
    // 未登录，只加载日志
    loadLogs();
  }
  
  // 显示"该功能仅供娱乐"的提示
  setTimeout(() => {
    alert('该功能仅供娱乐');
  }, 300);
});

// 监听时间变化，重新安排签到
watch(signTime, () => {
  if (autoSignEnabled.value) {
    scheduleNextSignIn();
  }
});
</script>

<style lang="scss" scoped>
.sign-page {
  min-height: calc(100vh - 60px);
  padding: 5px 0;
  background-color: transparent;
  position: relative;
}

.container {
  max-width: 450px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 10px;
}

.card {
  background-color: rgba(15, 25, 35, 0.85);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 58, 58, 0.2);
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, 
      rgba(255, 58, 58, 0), 
      rgba(255, 58, 58, 0.8), 
      rgba(255, 58, 58, 0));
  }
}

.card-title {
  background-color: rgba(255, 58, 58, 0.1);
  padding: 8px 15px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 58, 58, 0.2);
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
  }
}

// 登录表单
.login-form {
  padding: 12px;
}

.form-group {
  margin-bottom: 12px;
  
  label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-size: 14px;
  }
}

.input-row {
  display: flex;
  position: relative;
}

.input-field {
  flex: 1;
  padding: 8px 10px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  
  &:focus {
    outline: none;
    border-color: rgba(255, 58, 58, 0.5);
  }
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.3);
  }
}

.addon-btn {
  margin-left: 8px;
  padding: 0 10px;
  background-color: rgba(255, 58, 58, 0.8);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  
  &:disabled {
    background-color: rgba(255, 58, 58, 0.3);
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
  }
}

.login-actions {
  margin-top: 15px;
  
  .btn {
    width: 100%;
  }
}

// 按钮样式
.btn {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  
  &:disabled {
    background-color: rgba(255, 58, 58, 0.3);
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.5);
  }
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 58, 58, 0.5);
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: normal;
}

// 状态消息
.status {
  margin-top: 12px;
  padding: 6px 8px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #666;
  font-size: 12px;
  
  &.success {
    border-color: #4caf50;
    background-color: rgba(76, 175, 80, 0.1);
  }
  
  &.error {
    border-color: #f44336;
    background-color: rgba(244, 67, 54, 0.1);
  }
}

// 个人资料
.profile-content {
  padding: 12px;
}

.profile-user {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
  padding: 2px;
  background-color: #222;
}

.profile-info {
  margin-left: 10px;
}

.profile-name {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 2px;
}

.profile-phone {
  font-size: 12px;
  color: var(--text-secondary);
}

.profile-status-wrapper {
  display: flex;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

.profile-status-item {
  flex: 1;
  padding: 8px 5px;
  text-align: center;
  position: relative;
  
  &:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: rgba(255, 58, 58, 0.2);
  }
}

.profile-status-value {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
}

.profile-status-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

// 签到状态
.sign-status {
  padding: 12px;
}

.status-info {
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  margin-bottom: 6px;
  font-size: 14px;
  
  .label {
    width: 80px;
    color: var(--text-secondary);
  }
  
  .value {
    flex: 1;
    
    &.signed {
      color: var(--primary-color);
      font-weight: bold;
    }
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  
  .btn {
    flex: 1;
  }
}

// 设置
.settings {
  padding: 12px;
}

input[type="time"] {
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
  padding: 6px 8px;
  width: 120px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  
  input[type="checkbox"] {
    margin-right: 8px;
  }
}

// 日志
.sign-logs {
  padding: 8px 12px;
  max-height: 120px;
  overflow-y: auto;
}

.log-item {
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  font-size: 12px;
  
  &:last-child {
    border-bottom: none;
  }
}

.log-time {
  color: var(--text-secondary);
  margin-right: 8px;
  white-space: nowrap;
}

.log-message {
  flex: 1;
}

.empty-log {
  text-align: center;
  padding: 15px 0;
  color: var(--text-secondary);
  font-style: italic;
  font-size: 12px;
}

.log-footer {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

// 响应式
@media (max-width: 480px) {
  .action-buttons {
    flex-direction: column;
    gap: 6px;
  }
}
</style> 
